<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
    <title>jQuery世界国家下拉选择框</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/bootstrap-select.min.css">

    <style>
        .col-lg-3 {
            margin-bottom: 15px;
            text-align: center;
            border: 1px solid #e5e5e5;
            background-color: #fcfcfc;
            min-height: 300px;
            padding-top: 30px;
            padding-bottom: 30px;
            margin-left: 1em;
            margin-right: 1em;

        }

        .attr {
            padding: 2px 4px;
            font-size: 90%;
            color: #09a049;
            background-color: #f9f2f4;
            border-radius: 4px;
        }

        .row {
            padding-left: 5%;
            padding-right: 5%;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">jQuery世界国家下拉选择框 示例</h1>
            <hr>
        </div>
        <div class="col-lg-3">
            <h3>基础示例</h3>
            <p>设置默认选中的国家</p>
            <label>
                <select class="selectpicker countrypicker" data-default="CN" data-flag="false"></select>
            </label>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <pre><code class="attr">data-default="United States"</code></pre>
        </div>
        <div class="col-lg-3">
            <h3>带实时搜索框</h3>
            <p>带搜索框可以实时搜索</p>
            <label>
                <select class="selectpicker countrypicker" data-live-search="true" data-flag="false"></select>
            </label>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <pre><code class="attr">data-live-search="true"</code></pre>
        </div>
        <div class="col-lg-3">
            <h3>带国旗</h3>
            <p>默认国家，带实时搜索，带国旗</p>
            <label>
                <select class="selectpicker countrypicker" data-live-search="true" data-default="CN"
                        data-flag="true"></select>
            </label>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <pre><code class="attr">data-flag="true"</code></pre>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/countrypicker.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
